<header class="page-header">
  <div class="breadcrumb">
    <a href="{{href-to 'vault.cluster.policies' policyType}}" data-test-policy-list-link=true>
      <span class="sep">&#x0002f;</span>
      {{uppercase policyType}} Policies
    </a>
  </div>
  <div class="level">
    <div class="level-left">
      <h1 class="title is-3">
        {{model.id}}
        {{#if model.enforcementLevel}}
          <span class="tag is-medium" aria-label="Enforcement level: {{model.enforcementLevel}}">
            {{model.enforcementLevel}}
          </span>
        {{/if}}
      </h1>
    </div>
  </div>
</header>

<form {{action "savePolicy" model on="submit"}}>
  <div class="box is-bottomless is-fullwidth is-marginless">
    <div class="level is-mobile">
      <div class="level-left">
        <label for="policy" class="is-label">Policy</label>
      </div>
      <div class="level-right">
        <div class="field is-horizontal is-flex-end is-single-line">
          {{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}}
            <div class="control is-flex">
              {{input
                id="edit"
                type="checkbox"
                name="navToEdit"
                class="switch is-rounded is-success is-small"
                checked=true
                change=(action (nav-to-route 'vault.cluster.policy.show' model.id replace=true) )
                data-test-policy-edit-toggle=true
              }}
              <label for="edit">Edit</label>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
    {{message-error model=model}}
    <div class="field">
      {{ivy-codemirror
        value=model.policy
        valueUpdated=(action (mut model.policy))
        options=(hash
          lineNumbers=true
          tabSize=2
          mode='ruby'
          theme='hashi'
          extraKeys=(hash
            Shift-Enter=(action "savePolicy" model)
          )
        )
      }}
      <div class="box is-shadowless is-fullwidth has-short-padding">
        <p class="help-text has-text-grey-dark is-size-7">
          You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field
        </p>
      </div>
    </div>
    {{#each model.additionalAttrs as |attr|}}
      {{form-field data-test-field attr=attr model=model}}
    {{/each}}
    <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
      <div class="field is-grouped">
        {{#if capabilities.canUpdate}}
          <div class="control">
            <button
               type="submit"
               disabled={{buttonDisabled}}
               class="button is-primary"
               data-test-policy-save=true
             >
               Save
            </button>
          </div>
        {{/if}}
        <div class="control">
          <a href="{{href-to "vault.cluster.policy.show" model.id replace=true }}" class="button">
            Cancel
          </a>
        </div>
      </div>
      {{#if (and (not-eq model.id "default") capabilities.canDelete)}}
        {{#confirm-action
          buttonClasses="button is-ghost"
          onConfirmAction=(action "deletePolicy" model)
          confirmMessage=(concat "Are you sure you want to delete " model.id "?")
          data-test-policy-delete=true
        }}
            Delete
        {{/confirm-action}}
      {{/if}}
    </div>
  </div>
</form>
